<template>
	<view class="uni-margin-wrap">
		<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration">
			<swiper-item v-for="item in list" :key="item.id" class="swiper-item">
				<image mode="aspectFill" :src="imgUrl+item.picture"></image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {getAdvertisements} from '../../service/advertisement.js'
	import {BASE_IMG_URL} from '../../utils/config.js'
	export default {
		data() {
			return {
				imgUrl:BASE_IMG_URL,
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				list:[]
			}
		},
		created() {
			
			console.log(1111);
			this.getData();
		},
		methods:{
			async getData(){
				
				const res=await getAdvertisements(1);
				
			     this.list=res.list;
				console.log("广告", this.list);
			}
		}
	}
</script>

<style lang="less">
	.uni-margin-wrap {
		  margin: 0px 32rpx;
		}
		.swiper {
			height: 252rpx;
		}
		.swiper-item {
			display: block;
			text-align: center;
			background-color: skyblue;
			image{
				width: 100%;
               height: 252rpx;
			}
			
		}
		.swiper-list {
			margin-top: 40rpx;
			margin-bottom: 0;
		}
		.uni-common-mt {
			margin-top: 60rpx;
			position: relative;
		}
		.info {
			position: absolute;
			right: 20rpx;
		}
		.uni-padding-wrap {
			width: 550rpx;
			padding: 0 100rpx;
		}
</style>